<template>

    <CommonContainer title="还车结算">
        <template v-slot:rightInfo>
            <span class="totalAmount">总计应收费用：{{ format_thousand(totalReceivables) }}元</span>
        </template>
        <div>
            <!--基础信息-->
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-descriptions>
                        <el-descriptions-item label="还车类别">
                            <dict-tag :options="dict.type.return_car_type" :value="detailInfo.returnCategory"/>
                        </el-descriptions-item>
                        <el-descriptions-item :label="`${detailInfo.returnCategory==3?'过户时间':'还车时间'}`">{{ detailInfo.returnTime|filterNull }}</el-descriptions-item>
                        <el-descriptions-item label="还车里程数(km)">{{ detailInfo.returnMileage|filterNull }}</el-descriptions-item>
                        <el-descriptions-item label="还车油量(%)">{{ detailInfo.returnFuel|filterNull }}</el-descriptions-item>
                        <el-descriptions-item label="已履行租期">{{ detailInfo.fulfilledLeaseTerm }}</el-descriptions-item>
                        <el-descriptions-item label="行驶里程(km)">{{ detailInfo.drivingMileage|filterNull }}</el-descriptions-item>
                        <el-descriptions-item label="油量差值(%)">{{ oilVolumeDiff|filterNull }}</el-descriptions-item>
                        <el-descriptions-item v-if="detailInfo.returnCategory == 1" label="违约原因">
                            <dict-tag :options="dict.type.reason_for_early_return" :value="parseInt(detailInfo.defaultReason)"/>
                        </el-descriptions-item>

                        <template v-if="detailInfo.returnCategory != 3">
                            <el-descriptions-item label="还车原因" :span="3">{{ detailInfo.reasonForReturningTheCar|filterNull }}</el-descriptions-item>
                            <template v-if="detailInfo.returnCategory < 3">
                              <el-descriptions-item label="验车方式" :span="3">
                                <dict-tag :options="dict.type.vehicle_inspection_method" :value="detailInfo.vehicleInspectionMethod"/>
                              </el-descriptions-item>
                                <el-descriptions-item label="还车附件" :span="3">
                                    <image-common disabled v-model="detailInfo.returnAccessories" :up-type="2"></image-common>
                                </el-descriptions-item>

                              <template v-if="detailInfo.vehicleInspectionMethod==2">
                                <el-descriptions-item label="联系人">{{ detailInfo.thirdPartyContact|filterNull }}</el-descriptions-item>
                                <el-descriptions-item label="联系人电话">{{ detailInfo.thirdPartyContactPhone|filterNull }}</el-descriptions-item>
                                <el-descriptions-item label="检测城市">{{ detailInfo.thirdPartyCityName|filterNull }}</el-descriptions-item>
                                <el-descriptions-item label="车辆存放地址">{{ detailInfo.thirdPartyAdress|filterNull }}</el-descriptions-item>
                              </template>
                            </template>
                        </template>
                      <el-descriptions-item label="还车单" :span="3">
                        <image-common disabled v-model="detailInfo.returnSlip" :up-type="2"></image-common>
                      </el-descriptions-item>

                    </el-descriptions>
                </el-col>
            </el-row>
            <!--还车车况|车辆检测信息-->
            <template v-if="detailInfo.returnCategory < 3">
                <el-row :gutter="10" v-if="detailInfo.vehicleInspectionMethod == 1">
                    <el-col :span="24">
                        <p class="subtitle">还车车况</p>
                    </el-col>
                    <el-col :span="24">
                        <el-descriptions>
                            <el-descriptions-item label="车前">
                                <image-common disabled v-model="detailInfo.carFront" :up-type="2"></image-common>
                            </el-descriptions-item>
                            <el-descriptions-item label="车后">
                                <image-common disabled v-model="detailInfo.carRear" :up-type="2"></image-common>
                            </el-descriptions-item>
                            <el-descriptions-item label="车左">
                                <image-common disabled v-model="detailInfo.carLeft" :up-type="2"></image-common>
                            </el-descriptions-item>
                            <el-descriptions-item label="车右">
                                <image-common disabled v-model="detailInfo.carRight" :up-type="2"></image-common>
                            </el-descriptions-item>
                            <el-descriptions-item label="仪表盘">
                                <image-common disabled v-model="detailInfo.dashboard" :up-type="2"></image-common>
                            </el-descriptions-item>
                            <el-descriptions-item label="其他">
                                <image-common disabled v-model="detailInfo.other" :up-type="2"></image-common>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                    <el-col :span="24" v-if="detailInfo.orderReturnDamage && detailInfo.orderReturnDamage.length>0">
                        <el-table
                            :data="detailInfo.orderReturnDamage"
                            :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                            <el-table-column
                                align="center"
                                prop="damageType"
                                label="车损项"
                                min-width="180">
                                <template v-slot="{row}">
                                    <dict-tag :options="dict.type.return_car_damage_type" :value="row.vehicleDamageItem"/>
                                </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleDamageDetail"
                                label="车损详情"
                                min-width="180">
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleDamageFee"
                                label="预估车损费"
                                min-width="180">
                              <template v-slot="{row}">
                                {{format_thousand(row.vehicleDamageFee)}}
                              </template>
                            </el-table-column>
                            <el-table-column
                                align="center"
                                prop="vehicleDamageRemark"
                                label="备注"
                                min-width="180">
                            </el-table-column>

                        </el-table>
                    </el-col>

                </el-row>
                <el-row :gutter="10" v-else-if="detailInfo.vehicleInspectionMethod == 2">
                    <el-col :span="24">
                        <div class="flex-row-center-sb">
                            <p class="subtitle">车辆检测信息</p>
                          <p style="color: #1890ff;font-size: 13px;" @click="handleThirdPartyTesting">验车项明细</p>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <el-descriptions>
                            <el-descriptions-item label="车损费">
                                {{ format_thousand(detailInfo.vehicleDamageFee)|filterNull }}
                            </el-descriptions-item>
                            <el-descriptions-item :span="2" label="车损说明">
                                {{ format_thousand(detailInfo.vehicleDamageDescription)|filterNull }}
                            </el-descriptions-item>
                            <el-descriptions-item label="验车单">
                                <image-common disabled v-model="detailInfo.acceptanceForm" :up-type="2"></image-common>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                </el-row>
            </template>
            <!--理赔方式-->
            <template v-if="detailInfo.returnCategory == 4">
                <el-row :gutter="10">
                    <el-col :span="24">
                        <div class="flex-row-center">
                            <p class="subtitle">理赔方式</p>
                        </div>
                    </el-col>
                    <el-col :span="24">
                        <el-descriptions>
                            <el-descriptions-item label="理赔承担方式">
                                {{ detailInfo.claimsMethod == 1 ? '客户理赔' : '保险理赔' }}
                            </el-descriptions-item>
                            <el-descriptions-item :label="`${detailInfo.claimsMethod==1?'客户理赔款':'保险理赔款'}`">
                                {{ detailInfo.compensationClaims|filterNull }}
                            </el-descriptions-item>
                            <el-descriptions-item label="其他费用">
                                {{ format_thousand(detailInfo.otherFee)|filterNull }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                </el-row>
            </template>
            <!--违章信息-->
            <el-row :gutter="10">
                <el-col :span="24">
                    <p class="subtitle">违章信息</p>
                </el-col>
                <el-col :span="24">
                    <el-descriptions>
                        <el-descriptions-item label="违章分数">
                            {{ detailInfo.violationScore|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item :span="2" label="违章费用">
                            {{ format_thousand(detailInfo.violationFee)|filterNull }}
                        </el-descriptions-item>
                        <el-descriptions-item label="违章附件">
                            <image-common disabled v-model="detailInfo.violationAttachment" :up-type="2"></image-common>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
            <!--扣款费用-->
            <el-row :gutter="10">
                <el-col :span="24">
                    <p class="subtitle">扣款费用</p>
                </el-col>
                <el-col :span="24">
                    <el-descriptions>
                        <el-descriptions-item label="车辆租金欠款金额">{{ format_thousand(detailInfo.rentArrears)|filterNull }}</el-descriptions-item>
                        <el-descriptions-item label="剩余租期">{{ detailInfo.remainingLeaseTerm|filterNull }}</el-descriptions-item>
                        <template v-if="detailInfo.returnCategory==1">
                            <el-descriptions-item  label="违约金">{{ format_thousand(detailInfo.defaultDeduction)|filterNull }}</el-descriptions-item>
                            <el-descriptions-item  label="违约金减免">{{ format_thousand(detailInfo.defaultReduction)|filterNull }}</el-descriptions-item>
                        </template>
                        <el-descriptions-item v-if="detailInfo.returnCategory>2" label="尾款">{{ format_thousand(detailInfo.balancePayment)|filterNull }}</el-descriptions-item>
                        <el-descriptions-item label="加速折旧费">{{ format_thousand(detailInfo.depreciation)|filterNull }}</el-descriptions-item>
                        <el-descriptions-item label="超里程数(km)">{{ detailInfo.overMileage|filterNull }}</el-descriptions-item>
                        <el-descriptions-item label="超里程费">{{ format_thousand(detailInfo.overMileageFee)|filterNull }}</el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>
            <!--自定义扣款项-->
            <el-row :gutter="10" v-if="detailInfo.orderReturnDeduction && detailInfo.orderReturnDeduction.length>0">
                <el-col :span="24">
                    <p class="subtitle">自定义扣款项</p>
                </el-col>
                <el-table
                    :data="detailInfo.orderReturnDeduction"
                    :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                    <el-table-column
                        align="center"
                        prop="deductionName"
                        label="扣款项名称"
                        min-width="180">
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="deductionAmount"
                        label="扣款金额"
                        min-width="180">
                      <template v-slot="{row}">
                        {{format_thousand(row.deductionAmount)}}
                      </template>
                    </el-table-column>
                    <el-table-column
                        align="center"
                        prop="deductionReason"
                        label="扣款原因"
                        min-width="180">
                    </el-table-column>

                </el-table>
            </el-row>
        </div>
    </CommonContainer>


</template>

<script>
import dayjs from 'dayjs'
import {queryReport} from "@/api/returnCar/returnCar";
export default {
    dicts: ['return_car_type', 'vehicle_inspection_method', 'return_car_damage_type', 'return_car_breach','reason_for_early_return'],
    props: {
        detailInfo: {
            type: Object,
            default: () => {
                return {}
            }
        }

    },
    data() {
        return {}
    },
    computed: {
        // fulfilledLeaseTerm(){
        //   let outboundDate = this.detailInfo?.outboundVehicleCondition.outboundDate;
        //   const date1 = new Date(outboundDate);
        //   const date2 = new Date(this.detailInfo.returnTime);
        //   if(!date1||!this.detailInfo.returnTime){
        //     return "--"
        //   }
        //   let months = (date2.getFullYear() - date1.getFullYear()) * 12;
        //   months -= date1.getMonth();
        //   months += date2.getMonth();
        //   const dateDiff = date2.getDate() - date1.getDate();
        //   if (dateDiff < 0) {
        //     months--;
        //   }
        //   if(months<0||(months===0&&dateDiff<0)){
        //     return "0日"
        //   }else{
        //     if(months===0){
        //       return `${dateDiff > 0 ? dateDiff : 1}日`;
        //     }else{
        //       return `${months}月${dateDiff > 0 ? dateDiff : 0}日`;
        //     }
        //   }
        // },
        oilVolumeDiff() {
            //油量差值=还车油量-出库油量
            let oilVolumeDiff = Number(this.detailInfo.returnFuel) - Number(this.detailInfo.outboundFuel)
            console.log('oilVolumeDiff', oilVolumeDiff)
            return oilVolumeDiff
        },
        //理赔总计=理赔费+其他费
        claimsTotal() {
            let total = 0
            const detailInfo = this.detailInfo;
            if (detailInfo.returnCategory == 4) {
                total = Number(detailInfo?.compensationClaims || 0) + Number(detailInfo?.otherFee || 0)
            }
            return total
        },
        // 总计应收=其他费用累计(租金及理赔费用不参与计算)
        totalReceivables() {
            let total = 0
            const detailInfo = this.detailInfo;
            //提前还车|到期还车->自主验车->车损费
            if (detailInfo?.returnCategory < 3 && detailInfo?.vehicleInspectionMethod == 1) {
                if (detailInfo.orderReturnDamage && detailInfo.orderReturnDamage.length > 0) {
                    detailInfo.orderReturnDamage.forEach(item => {
                        total += Number(item.vehicleDamageFee || 0)
                    })
                }
            }
            //提前还车|到期还车->第三方检测->车损费
            if (detailInfo?.returnCategory < 3 && detailInfo?.vehicleInspectionMethod == 2) {
                total += Number(detailInfo?.vehicleDamageFee || 0)
            }
            //违章费用
            total += Number(detailInfo?.violationFee || 0)
            //扣款费用项=违约费+加速折旧费+超里程费
            total +=  Number(detailInfo?.depreciation || 0) + Number(detailInfo?.overMileageFee || 0)
            //如果是租购还车|事故还车+尾款
            if (detailInfo?.returnCategory > 2) {
                total += Number(detailInfo.balancePayment || 0)
            }
            //自定义扣款项
            if (detailInfo?.orderReturnDeduction && detailInfo?.orderReturnDeduction?.length > 0) {
                detailInfo.orderReturnDeduction.forEach(item => {
                    total += Number(item.deductionAmount || 0)
                })
            }
            //违约扣款费及费用减免
            if(detailInfo?.returnCategory == 1){
                total +=Number(detailInfo?.defaultDeduction||0)
                total -= Number(detailInfo?.defaultReduction||0)
            }
            return total
        }
    },
    methods: {
        //第三方检测明细
        handleThirdPartyTesting() {
          queryReport(this.detailInfo.thirdPartyUrl).then(res => {
            let url = res.data
            if(url){
              window.open(url, '_blank')
            }else{
              this.$message.error("暂无第三方检测报告");
            }
          })

        }
    },
    mounted() {
    },

}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.subtitle {
    font-size: 14px;
    font-weight: bold;
    color: #333333;

    &::before {
        display: inline-block;
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 4px;
        background-color: $primary;
        margin-right: 5px;
        position: relative;
        top: -1px;
    }
}

::v-deep .el-form--label-top .el-form-item__label {
    padding: 0;
}

.el-form-item {
    margin-bottom: 15px;
    width: 70%;
}

.totalAmount {
    font-size: 14px;
    font-weight: bold;
    color: red;
}
</style>
